<template>
  <div class>
    <!-- 新增管理员 -->
    <div v-if="adminstate==2" class="add">
      <el-popover placement="right" width="280" trigger="click">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="手机号：">
            <el-input v-model="form.adminName"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="form.adminPass"></el-input>
          </el-form-item>
          <el-form-item label="选择：">
            <el-select v-model="form.region" placeholder="请选择新增管理员类型">
              <el-option label="高级管理员" value="2"></el-option>
              <el-option label="普通管理员" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form>
        <el-button slot="reference">新增管理员</el-button>
      </el-popover>
    </div>
    <!-- 管理员列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="180">
        <template slot-scope="scope">
          <div>
            <el-tag>{{ scope.row.userName}}</el-tag>
          </div>
        </template>
      </el-table-column>
    
     <el-table-column
      label="级别"
      width="180">
      <template slot-scope="scope">
          <div  >
            <el-tag v-if='scope.row.loginState==2' >高级管理员</el-tag>
            <el-tag v-else >普通管理员</el-tag>
          </div>
      </template>
    </el-table-column>
    <el-table-column v-if='adminstate==2' label="操作">
      <template slot-scope="scope">
       <div v-if='scope.row.loginState==1'>
          <el-button
          size="mini"
          @click="handleEdit(scope.row._id)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row._id)">禁用</el-button>
       </div>
       <div v-if='scope.row.loginState==0'>
<el-button
          size="mini"
          type="danger"
          @click="using(scope.row._id)">启用</el-button>
       </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      adminstate: 0,
      form: {
        adminName: "",
        adminPass: "",
        region: ""
      }
    };
  },
  mounted() {
    this.islogin();
    this.getadmin();
  },
  methods: {
    //获取管理员列表
    getadmin() {
      Axios.get("/admin/getadmin").then(res => {
        this.tableData = res.data;
      });
    },
    //判断管理员身份
    islogin() {
      Axios.get("/admin/islogin").then(res => {
        this.adminstate = res.data.adminstate;
      });
    },
    //新增管理员
    onSubmit() {
      Axios.post("/admin/addadmin", {
        userName: this.form.adminName,
        passWord: this.form.adminPass,
        loginState: this.form.region,
        phone: this.form.adminName
      }).then(res => {
        if (res.data) {
          alert("创建成功！");
          this.getadmin();
        }
      });
    },
    //编辑
    handleEdit(_id) {
      this.$router.push(`/changeadmin/${_id}`)    
    },
    //禁用
    handleDelete(_id) {
      Axios.post("/admin/changestate", { _id, loginState: 0 }).then(res => {
        if (res.data) {
          this.getadmin();
        }
      });
    },
    //启用
    using(_id) {
      Axios.post("/admin/changestate", { _id, loginState: 1 }).then(res => {
        if (res.data) {
          this.getadmin();
        }
      })
    }
  }
}
</script>

<style>

</style>